<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:cote="http://java.sun.com/jsf/composite/componentes">

    <ui:composition template="/plantillas/plantillaPrincipal.xhtml">
        <ui:define name="contenido"> 
            <f:view>  
                <h:form id="formBusqueda">
                    <p:panel id="pnlBusquedaArticulos" header="Mes VS monto" style="width:100%;margin: 0px auto;" >
                        <p:panelGrid id="consultar">
                            <p:row >
                                <p:column>
                                    <h:outputText id="lblBanco" value="CATEGORIA: "  class="lblBusqueda"  />
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu id="cbxCategoria" value="#{BKReporteIndicadores.categoriaBusqueda}" converter="#{categoriaArticuloConverter}">  
                                        <f:selectItems value="#{BKReporteIndicadores.listaCategorias}" var="categoria" 
                                                       itemLabel="#{categoria.nombre}" itemValue="#{categoria}"/>  
                                    </p:selectOneMenu>  
                                </p:column>
                                <p:column>
                                    <h:outputText  class="lblBusqueda" value="AÑO: "   />
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu id="cbxModelo" value="#{BKReporteIndicadores.anio1}" >  
                                        <f:selectItems value="#{BKReporteIndicadores.anios}" var="anio" itemLabel="#{anio}" itemValue="#{anio}"/>  
                                    </p:selectOneMenu>
                                </p:column>
                                <p:column>
                                    <p:commandButton id="btnBuscarCategoria" actionListener="#{MBReporteIndicadores.buscarMesVSMonto}" value="REALIZAR REPORTE"  
                                                     update="chart,reporte" style="font-size: 10px" process="@this consultar"
                                                     onclick="verChart()"/>
                                </p:column>
                            </p:row>
                        </p:panelGrid>




                        <p:panelGrid style="width:800px;margin-top: 20px;margin: 0 auto" id="reporte">
                            <p:row>
                            <p:column colspan="4" styleClass="pocoPadding">
                                    <cote:componenteCabecera documento="" 
                                                             codigo=""
                                                             esCodigo="false"/>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column >
                                    <p:dataTable var="dato" value="#{BKReporteIndicadores.listaDatos}" 
                                                 style="width: 250px;margin: 0 auto;" > 
                                        <p:column style="font-size: 9px">
                                            <f:facet name="header" >
                                                <h:outputText value="MES"  />     
                                            </f:facet>
                                            <h:outputText value="#{dato.mes}" />
                                            <f:facet name="footer" >
                                                <h:outputText value="TOTAL" />     
                                            </f:facet>
                                        </p:column>
                                        <p:column style="font-size: 9px">
                                            <f:facet name="header" >
                                                <h:outputText value="MONTO"  />     
                                            </f:facet>
                                            <h:outputText value="#{dato.montoMes}" style="float: right" >
                                                <f:convertNumber minFractionDigits="2" maxFractionDigits="2" />
                                            </h:outputText>
                                            <f:facet name="footer" >
                                                <h:outputText value="#{BKReporteIndicadores.totalGeneral}" style="float: right" >
                                                    <f:convertNumber minFractionDigits="2" maxFractionDigits="2" />
                                                </h:outputText>     
                                            </f:facet>

                                        </p:column>
                                    </p:dataTable>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column >
                                    <p:outputPanel id="grafico" layout="block" >
                                        <p:lineChart value="#{BKReporteIndicadores.mesVSMonto}" legendPosition="e"  id="chart" animate="true"
                                                     title="TOTAL #{BKReporteIndicadores.categoriaBusqueda.nombre} #{BKReporteIndicadores.anio1}" 
                                                     minY="0"  style="height:300px;margin-top:20px;font-size: 7px" styleClass="print" widgetVar="chart"/>  
                                    </p:outputPanel>
                                    <p:outputPanel id="output" layout="block" style="display: none" />  
                                </p:column>
                            </p:row>

                        </p:panelGrid>

                        <p:panelGrid style="width:15%;margin: 10px auto;">

                            <p:row >
                                <p:column>
                                    <p:commandButton  value="IMPRIMIR" type="button" icon="ui-icon-print" onclick="exportChart()" >  
                                        <p:printer target="reporte"  />    
                                    </p:commandButton >
                                </p:column>
                            </p:row>	

                        </p:panelGrid>

                    </p:panel>

                </h:form>




            </f:view>    
        </ui:define>
    </ui:composition>
</html>   